/*
 * @Description: 购买成功
 * @Author: ziwei.ma
 * @Date: 2019-10-31 14:13:11
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-31 19:25:36
 */

<template>
  <div class="result_wrapper flex-v flex-vc">
    <img :src="img">
    <div class="flex-v flex-vc">
      <div class="fontsize48 baseColorNoAcitve">购票成功</div>
      <span class="fontsize32">请提前十分钟达到候车点候车</span>
    </div>
    <div class="btn_wrapper flex-v flex-hv">
      <div
        class="fontsize28"
        style="color:#666666"
      >可在“定制班线 - 我的车票”中查看已购买的车票</div>
      <div
        class="FristBtn fontsize32"
        @click="goToHome"
      >完成</div>
      <div
        v-show="hasBackTrack===1"
        class="SecondBtn fontsize32"
        @click="goReturnTicket"
      >购买返程</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {

  },
  props: {
    hasBackTrack: {// 是否有返程(1.有 0.无)
      type: Number,
      default: null
    },
    direction: {// 线路方向1、上行，2.下行
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      img: require('@wechat/img/succeed.png')
    }
  },
  methods: {
    goToHome() { // 返回首页、完成
      this.$router.push({ name: 'buyIndex' })
    },
    goReturnTicket() { // 购买返程
      // this.$router.go(-3)
      this.$router.push({
        name: 'buyTicket',
        query: {
          direction: this.direction === 1 ? 2 : 1
        }
      })
    }
  }
}
</script>

<style scoped>
.result_wrapper {
  height: 100%;
  width: 100%;
}
.result_wrapper > img {
  width: 200px;
  height: 200px;
  margin: 64px;
}
.result_wrapper > div > span {
  color: #666666;
  margin: 16px 80px 0;
  text-align: center;
}
.btn_wrapper {
  line-height: 72px;
  text-align: center;
  position: absolute;
  bottom: 58px;
}
.FristBtn {
  width: 686px;
  height: 72px;
  background: #027aff;
  border-radius: 36px;
  color: #ffffff;
}
.SecondBtn {
  margin: 32px 0 50px;
  width: 686px;
  height: 72px;
  border-radius: 36px;
  border: 1px solid #027aff; /*no*/
  color: #027aff;
}
</style>
